<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>05_client系列</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                padding: 10px;
                border: 1px solid black;
                margin: 10px;
                background-color: darkcyan;
            }
        </style>
    </head>
    <body>
        <!-- 
            只读:只能获取 不能设置
             - clientWidth 拿的是盒子   内容 + padding的宽
             - clientHeight拿的是盒子   内容 + padding的高
             - clientLeft     拿的是盒子左边框大小
             - clientTop      拿的是盒子上边框大小 -->

        <div></div>


        <script>
            var div = document.querySelector('div');
            // 获取盒子的width
            console.log(div.clientWidth);//**********
            console.log(div.clientHeight);//**********
            console.log(div.clientLeft);
            console.log(div.clientTop);

            div.clientWidth = "500px";
            div.clientHeight = "500px";
            div.clientLeft = '10px';
            div.clientTop = '10px';
        </script>

    </body>
</html>